<template>
  <div class="admin-window">
    <div class="title drag">滑动变组商城</div>
    <div class="body-content">
      <div class="left-side">
        <div
          :class="['menu-item', item.path == route.path ? 'active' : '']"
          @click="menuJump(item)"
          v-for="(item, index) in menuList"
          :key="index"
        >
          <div
            :class="['iconfont', item.icon]"
            :style="{ background: item.iconBgColor }"
          ></div>
          <div class="text">{{ item.name }}</div>
        </div>
      </div>
      <div class="right-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  watch,
  onUnmounted,
} from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const menuList = ref([
  {
    name: "挑选商品",
    icon: "icon-shangpinguanli",
    path: "/user/itemList",
    iconBgColor: "#f39c12",
  },
  {
    name: "购物车",
    icon: "icon-gouwuche",
    path: "/user/cartList",
    iconBgColor: "#2d8cf0",
  },
  {
    name: "地址信息",
    icon: "icon-dizhi",
    path: "/user/addressList",
    iconBgColor: "#19be6b",
  },
  {
    name: "订单信息",
    icon: "icon-dingdan",
    path: "/user/orderList",
    iconBgColor: "#f5222d",
  },
  {
    name: "支付订单信息",
    icon: "icon-zhifuchenggong",
    path: "/user/payOrderList",
    iconBgColor: "#1296db",
  },
  {
    name: "物流信息",
    icon: "icon-wuliu",
    path: "/user/logisticsList",
    iconBgColor: "#2db7fa",
  },
  {
    name: "个人信息",
    icon: "icon-yonghu",
    path: "/user/userInfo",
    iconBgColor: "#1890ff",
  },
]);

const menuJump = (item) => {
  router.push(item.path);
};
</script>

<style lang="scss" scoped>
.admin-window {
  padding: 0px;
  border: 1px solid#ddd;
  background: #fff;
  position: relative;
  overflow: hidden;

  .title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid#ddd;
    text-align: center;
    font-weight: bold;
  }

  .body-content {
    height: calc(100vh - 42px);
    display: flex;

    .left-side {
      width: 200px;
      border-right: 1px solid #ddd;
      background: #e6e5e5;

      .menu-item {
        display: flex;
        align-items: center;
        padding: 10px 10px;
        position: relative;

        &:hover {
          cursor: pointer;
          background: #d6d6d6;
        }

        .iconfont {
          width: 35px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: #fff;
        }

        .text {
          flex: 1;
          color: #000000;
          margin-left: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .active {
        background: #c4c4c4;

        &:hover {
          background: #c4c4c4;
        }
      }
    }

    .right-content {
      flex: 1;
      padding: 10px;
    }
  }
}
</style>
